<template>
	<div>
		<el-upload :style="{...style,lineHeight:'unset'}" :action="uploadUrl" :show-file-list="false" :on-success="uploadAvatar"
			class="avatar-uploader" :class="{'avatar-circle':circle}" accept=".jpg, .jpeg, .png, .gif">
			<img :style="style" v-if="value" :src="value" class="avatar" />
			<i :style="style" v-else class="el-icon-plus avatar-uploader-icon" />
		</el-upload>
	</div>
</template>

<script>
	import {
		uploadUrl
	} from '@/common/apiconfig';
	export default {
		data() {
			return {
				imgPath: "",
				uploadUrl,
			};
		},
		props: {
			value: {
				default: '',
			},
			path: {
				type: String,
				default: ''
			},
			circle: {
				type: Boolean,
				default: false
			},
			size: [String, Number]
		},
		computed: {
			style() {
				return {
					width: this.size || '145px',
					height: this.size || '145px',
					lineHeight: this.size || '145px',
				}
			}
		},
		methods: {
			uploadAvatar(e) {
				if (this.path) {
					this.$emit("update:value", e.data[this.path] || '');
				} else {
					this.$emit("update:value", e.data || '');
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.avatar-uploader {
		::v-deep .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
	}

	.avatar-circle {
		::v-deep .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 100%;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}
	}

	.avatar {
		// width: 145px;
		// height: 145px;
		display: block;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		// width: 148px;
		// height: 148px;
		// line-height: 148px;
		text-align: center;
	}
</style>>